<template>
	<div class="tab-list">
		<div class="tab-list__inner flex row">
			<el-popover
				v-for="(tabItem, tabIndex) in tabList"
				:key="'tab-item-' + tabIndex"
				class="tab-item"
				popper-class="tab-popper"
				width="178"
				placement="bottom-start"
				trigger="hover"
			>
				<div class="tab-popper__content">
					<div class="title">
						<span>{{ tabItem.title }}</span>
					</div>
				</div>
				<router-link class="tab-item__reference flex row nodrag" tag="div" :to="tabItem.path" slot="reference">
					<div class="tab-item__inner flex row">
						<div class="icon flex center">
							<img v-if="tabItem.icon" :src="tabItem.icon" />
							<svg v-else viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
								<path
									d="M514.4 63.4c-1.2-0.1-2.4-0.2-3.6-0.2-1.3 0-2.5 0.1-3.7 0.2C262.2 65.9 64.4 264.8 63.5 510v1.6c0 247.5 200.7 448.2 448.2 448.2s448.2-200.7 448.2-448.2c0-246.6-199.2-446.7-445.5-448.2z m28 320.3c48.3-2.1 95.1-9.9 139.8-22.6 10.6 37.7 17.2 77.1 19.5 117.7H542.4v-95.1z m0-64.3V128.7c2 0.2 4.1 0.3 6.1 0.5 47.6 49 86.1 106.9 112.6 171-38 10.6-77.8 17.2-118.7 19.2z m-63.2-190.5V319c-39.7-2.6-78.3-9.4-115.2-20 27.3-63.8 66.3-121.4 114.5-170 0.2-0.1 0.5-0.1 0.7-0.1z m0 254.4v95.5H321.4c2.5-41.2 9.6-81.2 20.8-119.4 43.9 13 89.7 21.1 137 23.9z m-222.1 95.5H129c5.8-68.3 29.5-131.6 66.3-185.1 27.4 16.9 56.2 31.7 86.3 44.2-13.4 45.1-21.8 92.2-24.5 140.9z m-0.2 63.2c2.4 50 10.8 98.3 24.5 144.4-29.8 12.4-58.3 27-85.5 43.8-37.7-54.2-61.7-118.6-67.1-188.2h128.1z m64.3 0h158v99c-47.4 2.7-93.4 10.9-137.2 23.9-11.5-39.3-18.6-80.5-20.8-122.9z m158 163.4v189c-1-0.1-2.1-0.2-3.1-0.3-47.3-48.3-85.7-105.4-112.6-168.5 37.1-10.8 75.8-17.6 115.7-20.2z m63.2 189.1V704.9c40 2 78.9 8.3 116.2 18.4-27.6 64.4-67.2 122.4-116.2 171.2 0.1 0 0 0 0 0z m0-253.9V542h159.1c-2.5 41.7-9.7 82.1-21 120.7-44.2-12.4-90.4-20-138.1-22.1zM765.7 542h128.9c-5.4 68.4-28.6 131.7-65.1 185.3-28-16.9-57.6-31.7-88.3-44 13.5-45.1 21.9-92.4 24.5-141.3z m0.2-63.2c-2.3-47.8-10.1-94.3-22.9-138.6 30.3-12.2 59.4-26.8 87-43.6 35.7 52.8 58.7 115 64.4 182.1H765.9z m23.4-232.7c-21.5 12.6-44 23.7-67.3 33.3-18.1-44.6-41.4-86.5-69.1-125.1 52 20.6 98.4 52.2 136.4 91.8z m-415.7-93c-28 38.3-51.7 80-70.3 124.3-23.1-9.8-45.4-21.1-66.7-33.8 38.2-39.3 84.9-70.4 137-90.5zM237.2 780.3c21-12.5 43-23.6 65.7-33.2 18.2 43.5 41.2 84.5 68.5 122.3-50.9-20.1-96.5-50.7-134.2-89.1z m409.9 90.8c29-39.1 53.4-81.8 72.4-127.3 23.9 9.7 47 21 69.1 33.9-39.2 40.9-87.5 73.1-141.5 93.4z"
								></path>
							</svg>
						</div>
						<div class="title flex row">
							<span>{{ tabItem.title }}</span>
						</div>
						<div class="close flex center" @click.stop="handleTabClose(tabIndex)">
							<i class="el-icon el-icon-close"></i>
						</div>
					</div>
				</router-link>
			</el-popover>
		</div>
	</div>
</template>

<script>
import _ from "lodash"
import { v4 as uuid } from "uuid"
import { debounce } from "@/utils/debounce"
import { animate } from "@/utils/animate"
import bus from "@/bus"

export default {
	name: "TabList",
	data() {
		return {
			tabList: [],
		}
	},
	watch: {
		$route: {
			handler(newValue, oldValue) {
				console.log(newValue)
				if (newValue.meta.isShow) {
					this.handleSetTab({
						path: newValue.fullPath,
						icon: newValue.meta.icon,
						title: newValue.meta.title,
					})
				}
			},
			deep: true,
			immediate: true,
		},
	},
	methods: {
		handleSetTab(tab) {
			let hasTab = this.tabList.some(item => item.path === tab.path)
			if (!hasTab) this.insert(this.tabList.length, tab)
		},
		handleTabClose(index) {
			return new Promise((resolve, reject) => {
				if (this.tabList.length > 1) {
					// 如果要关闭的是当前激活的选项
					if (this.tabList[index].path === this.$router.fullPath) {
						// 如果要关闭的是最后一个选项
						if (index === this.tabList.length - 1) this.$router.push(this.tabList[index - 1].path)
						else this.$router.push(this.tabList[index + 1].path)
					}
				} else {
					// 如果要关闭的是剩余的最后一个选项
					if (index === this.tabList.length - 1) this.$router.push("/")
				}
				this.remove(index)
					.then(() => resolve())
					.catch(() => reject())
			})
		},
		remove(index) {
			return new Promise((resolve, reject) => {
				let tabItemEl = Array.from(this.$el.querySelectorAll(".tab-item"))[index]
				animate(tabItemEl, "is-remove")
					.then(() => {
						this.tabList.splice(index, 1)
						resolve()
					})
					.catch(() => {
						this.tabList.splice(index, 1)
						reject()
					})
			})
		},
		insert(index, tabList) {
			return new Promise((resolve, reject) => {
				index = _.isLength(index) ? index : 0
				tabList = _.isArray(tabList) ? tabList : _.isPlainObject(tabList) ? [tabList] : []
				this.tabList.splice(index, 0, ...tabList)

				const handler = tabItem => {
					return new Promise((resolve, reject) => {
						let tabIndex = this.tabList.findIndex(_tabItem => _tabItem.path === tabItem.path)
						let tabItemEl = Array.from(this.$el.querySelectorAll(".tab-item"))[tabIndex]
						animate(tabItemEl, "is-insert")
							.then(() => resolve())
							.catch(() => reject())
					})
				}

				this.$nextTick(() => {
					Promise.all(tabList.map(item => handler(item)))
						.then(() => resolve())
						.catch(() => reject())
				})
			})
		},
	},
	created() {},
	mounted() {},
	beforeDestroy() {},
}
</script>

<style lang="scss">
.el-popper.tab-popper {
	padding: 0;
}
</style>

<style lang="scss" scoped>
.tab-list {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 0 12px;
	font-size: $font-2-size;
	color: $font-1-color;
	line-height: 1;
	background-color: $font-4-color;
	overflow: hidden;

	> .tab-list__inner {
		box-sizing: border-box;
		width: 100%;
		height: calc(100% + 17px);
		overflow-x: scroll;

		> .tab-item {
			flex: 1 1 100%;
			display: block;
			width: 0;
			max-width: 180px;
			// min-width: calc($head-2-size + $font-2-size + $font-2-size + $font-2-size + $font-2-size + 36px - 3px);
			min-width: 100px;
			animation-name: none;
			animation-duration: $duration-3;
			animation-timing-function: linear;
			animation-delay: 0s;
			animation-iteration-count: 1;
			animation-direction: normal;
			animation-fill-mode: forwards;
			animation-play-state: running;

			@keyframes insert {
				0% {
					max-width: 0;
					opacity: 0;
				}
				100% {
					max-width: 180px;
					opacity: 1;
				}
			}

			@keyframes remove {
				0% {
					max-width: 180px;
					opacity: 1;
				}
				100% {
					max-width: 0;
					opacity: 0;
				}
			}

			&.is-insert {
				min-width: 0;
				animation-name: insert;
			}

			&.is-remove {
				min-width: 0;
				animation-name: remove;
			}

			.tab-item__reference {
				position: relative;
				box-sizing: border-box;
				// flex: 1 1 100%;
				// width: 0;
				// max-width: 180px;
				// // min-width: calc($head-2-size + $font-2-size + $font-2-size + $font-2-size + $font-2-size + 36px - 3px);
				// min-width: 100px;
				width: 100%;
				height: 100%;
				overflow: hidden;
				z-index: 0;
				background-color: $font-4-color;

				&::after {
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					right: 0;
					width: 100%;
					height: 100%;
					background-color: $transparent-color;
					z-index: 1;
					transition: background-color $duration-1;
				}

				&:hover {
					&::after {
						background-color: rgba($white-color, 0.2);
					}
				}

				// &.router-link-active,
				&.router-link-exact-active {
					background-color: $white-color;

					&:hover {
						&::after {
							background-color: rgba($white-color, 0);
						}
					}

					> .tab-item__inner {
						> .title {
							&::after {
								background: linear-gradient(to right, $transparent-color, $white-color);
							}
						}
					}
				}

				> .tab-item__inner {
					box-sizing: border-box;
					position: relative;
					align-items: center;
					width: 100%;
					height: 100%;
					padding: 0 12px;

					> .icon {
						width: $head-2-size;
						height: $head-2-size;

						> img {
							display: block;
							width: 100%;
							height: 100%;
							object-fit: contain;
						}

						> svg {
							display: block;
							width: 100%;
							height: 100%;
							object-fit: contain;

							path {
								fill: $font-1-color;
							}
						}
					}

					> .title {
						box-sizing: border-box;
						position: relative;
						flex: 1 1 100%;
						align-items: center;
						width: 0;
						max-width: calc(100% - 3em);
						height: 100%;
						overflow: hidden;

						&::after {
							content: "";
							position: absolute;
							top: 0;
							left: auto;
							bottom: 0;
							right: 0;
							width: 3em;
							height: 100%;
							background-color: $transparent-color;
							background: linear-gradient(to right, $transparent-color, $font-4-color);
						}

						> span {
							box-sizing: border-box;
							margin: 0 8px;
						}
					}

					> .close {
						position: absolute;
						top: auto;
						left: auto;
						bottom: auto;
						right: calc(12px - 3px);
						width: calc(1em + 3px);
						height: calc(1em + 3px);
						font-size: $font-2-size;
						background-color: $transparent-color;
						border-radius: 50%;
						z-index: 2;
						line-height: 1;
						transition: background-color $duration-1;

						&:hover {
							background-color: rgba($black-color, 0.1);
						}

						> i {
							display: block;
							width: 1em;
							height: 1em;
						}
					}
				}
			}
		}
	}
}

.tab-popper__content {
	> .title {
		box-sizing: border-box;
		padding: 12px;
	}
	> .snapshoot {
		> .snapshoot-image {
			display: block;
			width: 100%;
		}
	}
}
</style>
